<template>
  <div class="background">
    <!-- 导航一 -->
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>FLAG合集</span>
            </template>
            <!-- 第一个 -->
            <el-popover placement="right" width="1200" trigger="click">
              <!-- 内容输入区 -->
              <div class="text">
                <el-input
                  style="width: 300px"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </div>
              <!-- 内容结束区 -->
              <!-- 上传图片区 -->
              <div class="picture">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                    <div style="height: 50px"></div>
                  </div>
                </el-upload>
                <el-button class="button" type="primary" icon="el-icon-s-claim"
                  >点击打卡</el-button
                >
              </div>
              <!-- 上传结束区 -->
              <!-- 进度条区域 -->
              <div class="jindutiao">
                <el-progress
                  :percentage="percentage"
                  :color="customColor"
                ></el-progress>
                <el-progress
                  :percentage="percentage"
                  :color="customColorMethod"
                ></el-progress>
                <el-progress
                  :percentage="percentage"
                  :color="customColors"
                ></el-progress>
                <div>
                  <!-- 加减按钮 -->
                  <el-button-group>
                    <el-button
                      icon="el-icon-minus"
                      @click="decrease"
                    ></el-button>
                    <el-button
                      icon="el-icon-plus"
                      @click="increase"
                    ></el-button>
                  </el-button-group>
                </div>
              </div>
              <!-- 进度条结束 -->
              <!-- 表格区域 -->
              <div class="table">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px">{{
                        scope.row.date
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 表格结束区域 -->
              <el-menu-item index="1-1" slot="reference">FLAG1</el-menu-item>
            </el-popover>
            <!-- 第二个 -->
                        <el-popover placement="right" width="1200" trigger="click">
              <!-- 内容输入区 -->
              <div class="text">
                <el-input
                  style="width: 300px"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </div>
              <!-- 内容结束区 -->
              <!-- 上传图片区 -->
              <div class="picture">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                    <div style="height: 50px"></div>
                  </div>
                </el-upload>
                <el-button class="button" type="primary" icon="el-icon-s-claim"
                  >点击打卡</el-button
                >
              </div>
              <!-- 上传结束区 -->
              <!-- 进度条区域 -->
              <div class="jindutiao">
                <el-progress
                  :percentage="percentage"
                  :color="customColor"
                ></el-progress>
                <el-progress
                  :percentage="percentage"
                  :color="customColorMethod"
                ></el-progress>
                <el-progress
                  :percentage="percentage"
                  :color="customColors"
                ></el-progress>
                <div>
                  <!-- 加减按钮 -->
                  <el-button-group>
                    <el-button
                      icon="el-icon-minus"
                      @click="decrease"
                    ></el-button>
                    <el-button
                      icon="el-icon-plus"
                      @click="increase"
                    ></el-button>
                  </el-button-group>
                </div>
              </div>
              <!-- 进度条结束 -->
              <!-- 表格区域 -->
              <div class="table">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px">{{
                        scope.row.date
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 表格结束区域 -->
              <el-menu-item index="1-1" slot="reference">FLAG1</el-menu-item>
            </el-popover>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 导航二 -->
          <el-col :span="4">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>FLAG创建</span>
            </template>
            <!-- 第一个 -->

            <el-menu-item-group>
               <el-menu-item index="1-1"  @click="create">创建flag</el-menu-item>
               <el-menu-item index="1-1"  @click="flagheji">创建flag2</el-menu-item>
            </el-menu-item-group>

            <!-- 第二个 -->
          </el-submenu>
        </el-menu>
      </el-col>
      <div>
        <router-view/>
      </div>


     
  </div>
</template>

<script>

export default {

  data() {
    return {
      // 文本内容
      textarea: "",
      //   进度条
      percentage: 20,
      customColor: "#409eff",
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      //   表格内容
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 照片验证
      beforeUpload(file) {
        let types = [
          "image/jpeg",
          "image/jpg",
          "image/gif",
          "image/bmp",
          "image/png",
        ];
        const isImage = types.includes(file.type);
        const isLtSize = file.size / 1024 / 1024 < 2;
        if (!isImage) {
          this.$message.error("上传图片只能是 JPG、JPEG、gif、bmp、PNG 格式!");
          return false;
        }
        if (!isLtSize) {
          this.$message.error("上传图片大小不能超过 2MB!");
          return false;
        }
        return true;
      },
    };
  },
  methods: {
    // -------------------------------------
    create(){
     this.$router.push("/test5/create")
    //  this.$router.push("/test5/flagheji")
    },
    // 进度条
    customColorMethod(percentage) {
      // 进度条颜色
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    // 进度条增量
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    // 进度条减量
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
  },
};
</script>

<style>
.background {
  width: 100%;
  height: 700px;
  background-color: darkgrey;
}
.text {
  position: relative;
}
.picture {
  position: absolute;
  /* border: 1px solid red; */
  margin: -100px 0 0 500px;
}
.jindutiao {
  /* border: 1px solid blue; */
  width: 300px;
  margin: -100px 0 0 900px;
}
.table {
  margin-top: 50px;
  border: 1px solid red;
  height: 500px;
}
/* ----------------create---------------------- */
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 700px !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>